<!-- 首页 -->
<template>
  <div class="index-container">
    <div class="header-box">
      <TabsList
        :tabsList="tabsList"
        :activeItem="active"
        @click="OnTabsChange"
      />
      <Avater></Avater>
    </div>
    <HomeIndex v-if="active == 1" />
    <PhotoStore
      ref="PhotoStoreRef"
      v-if="active != 1"
      :isRealtime="active == 2 ? true : false"
    />
  </div>
</template>
<script setup>
import { reactive, toRefs, onMounted, computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import HomeIndex from "@/components/homeIndex/index.vue";
import PhotoStore from "@/components/photoStore/index.vue";

import icon_hand3 from "@/assets/image/icon_hand3.png";

const route = useRoute();

const state = reactive({
  icon_hand3,
  goodsList: [],
  tabsList: [
    {
      id: 1,
      name: "首页",
    },
    {
      id: 2,
      name: "图库",
    },
    {
      id: 3,
      name: "实时",
    },
  ],
});

const { goodsList, tabsList } = toRefs(state);

const goodsListLeft = computed(() =>
  state.goodsList.filter((o, i) => i % 2 == 0)
);
const goodsListRight = computed(() =>
  state.goodsList.filter((o, i) => i % 2 == 1)
);

let active = ref(1);
let PhotoStoreRef = ref(null);
active.value = localStorage.getItem('homeItem') ? Number(localStorage.getItem('homeItem')) : 1
const OnTabsChange = (ev) => {
  localStorage.setItem('homeItem',ev)
  active.value = ev;
  if (ev != 1 && PhotoStoreRef.value) {
    PhotoStoreRef.value.realTimePage();
  }
};

onMounted(() => {});
</script>


<style lang="scss" scoped>
.banner-box {
  margin: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.van-image {
  width: 100%;
  height: 200px;
}
</style>
